<template>
	<view class="left-box">
		<view class="left-item-one" v-if="activeTopOneMenuName">
			{{activeTopOneMenuName}}
		</view>
		<view :class="activename == item.id ? 'left-item-active' : 'left-item'" v-for="(item,index) in secondMenu"
			:key="index" @click="activeChange(item)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			secondMenu: {
				type: Array,
				default: []
			},
			activename: {
				type: Number,
				default: 0
			},
			activeTopOneMenuName: {
				type: String,
				default: ''
			},
		},
		methods: {
			activeChange(item) {
				this.$emit('activeChange', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.left-box {
		box-sizing: content-box;
		width: 256px;
		margin: 20px 40px 20px 20px;

		.left-item-one {
			padding-left: 40px;
			line-height: 55px;
			color: #FFFFFF;
			cursor: pointer;
			background-color: #193F93;
		}

		.left-item {
			padding-left: 40px;
			line-height: 40px;
			border: 1px solid #d8d8d8;
			color: #434343;
			cursor: pointer;
		}

		.left-item-active {
			padding-left: 40px;
			line-height: 40px;
			border: none;
			background-color: #EAEAEA;
			color: #434343;
			cursor: pointer;
		}
	}
</style>